<template>
    <div id="login">
        <div class="login-box">
            <!-- logo -->
            <div class="logo-box">
                <img src="@/assets/logo.png" alt="">
            </div>
            <!-- 表单 -->
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input :maxlength="6" v-model="form.username"></el-input>
                </el-form-item> 
                <el-form-item prop="password">
                    <el-input type="password" :maxlength="18" v-model="form.password"></el-input>
                </el-form-item>
                <p class="p-button">
                    <el-button type="primary" @click="userLogin()">登录</el-button>
                    <el-button @click="reset()">重置</el-button>
                </p>
            </el-form>
        </div>
    </div>
</template>
<script>
import { login } from '@/api/user'
import {getMenus} from '@/api/menu'
import {mapMutations} from 'vuex'
// import store from ''
export default {
    name:"Login",
    data() {
        return {
            form:{
                username:'',
                password:''
            },
            rules:{
                /**
                 * 用户名规则
                 */
                username:[
                    {required:true,message:'用户名不能为空'},
                    {min:2,max:8,message:'用户名长度为2~8位'}
                ],
                /**
                 * 密码规则
                 */
                password:[
                    {required:true,message:'密码不能为空'},
                    {min:6,max:18,message:'用户名长度为6~18位'}
                ]
            },
        }
    },
    mounted() {
        
    },
    methods: {
        ...mapMutations(['setMenus','setUser']),
        /**
         * 用户登录
         */
        async userLogin(formName) {
            try{
                this.loading = true;
                const data = await login(this.form);
                this.setUser(data);
                const menus =  await getMenus();
                this.setMenus(menus);
                this.$router.push({name:'HomeLayout'})
                console.log(data);
            }catch(error){
                console.log(error);
            }
            this.loading = false;
        },
        /**
         * 重置
         */
        reset(){
            this.form = {
                username:'',
                password:''
            }
            this.$refs.form.resetFields();
        }
    },
}
</script>
<style lang="less">
    #login{
        height: 100%;
        background: #2b4b6b;
        .login-box{
            width: 450px;
            height: 300px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            top: 50%;
            left: 50%;
            padding: 15px;
            box-sizing: border-box;
            transform: translate(-50%,-50%);
            box-shadow: 0 0 10px #ccc;
            .logo-box{
                width: 152px;
                height: 152px;
                border-radius: 50%;
                box-sizing: border-box;
                background: #fff;
                box-shadow: 0 0 10px #ccc;
                position: absolute;
                top: -50%;
                left: 50%;
                transform: translate(-50%,50%);
                padding: 10px;
                &>img{
                    width: 100%;
                    border-radius: 50%;
                    background: #eee;
                }
            }
            .el-form{
                margin-top: 90px;
                .p-button{
                    float: right;
                }
            }
        }
    }
</style>